<template>
    <div class="container flex-container">
        <n-card class="left">
            <div class="avatar-name">
                <n-avatar
                    :round="true"
                    :size="120"
                    :style="{color: 'white', backgroundColor: '#c64a38', fontSize: '60px'}"
                >{{ userInfo.username.substring(0, 1) }}
                </n-avatar>
                <n-text class="username">{{ userInfo.username }}</n-text>
            </div>
            <n-space :vertical="true" size="large">
                <div class="credit">积分：
                    <n-tag :bordered="false" type="info">{{ userInfo.credit }}</n-tag>
                </div>
                <div class="create_time">学号：{{ userInfo.account }}</div>
                <div class="create_time">入驻：{{ $dayjs(userInfo.createTime).format('YYYY 年 MM 月 DD 日') }}</div>
                <div v-if="userInfo.email !== ''" class="create_time">邮箱：{{ userInfo.email }}</div>
                <div v-if="userInfo.lastLogin" class="create_time">最近一次登录时间：{{
                        $dayjs(userInfo.lastLogin)
                            .format('YYYY 年 MM 月 DD 日')
                    }}
                </div>
                <div class="introduction">简介：{{ userInfo.introduction || '这个人很神秘，什么都没有写' }}</div>
            </n-space>
        </n-card>
        <n-spin :show="questionStore.loading" class="right">
            <n-card>
                <n-tabs :animated="true" size="large" type="segment">
                    <n-tab-pane name="questions" style="min-height: 50vh" tab="我的提问">
                        <div class="content">
                            <Question v-for="question in questions" :key="question.id" :question="question"
                                      :user-state="userState"/>
                            <n-empty v-if="!questions.length" description="你还没有提问过！" size="large">
                                <template #extra>
                                    <n-button>
                                        看看别的
                                    </n-button>
                                </template>
                            </n-empty>
                        </div>
                        <div v-if="pages.question > 1" class="pagination">
                            <n-pagination v-model:page="currentPage.question" :page-count="pages.question"
                                          @update:page="handleCurrentPageChangeOfQuestion"/>
                        </div>
                    </n-tab-pane>
                    <n-tab-pane name="answers" style="min-height: 50vh" tab="我的回答">
                        <div class="content">
                            <question-answer v-for="answer in answers" :key="answer.id" :answer="answer"
                                             :user-state="userState"/>
                            <n-empty v-if="!answers.length" description="你还没有回答过问题" size="huge">
                                <template #extra>
                                    <router-link to="/">
                                        <n-button>
                                            看看别的
                                        </n-button>
                                    </router-link>
                                </template>
                            </n-empty>
                        </div>
                        <div v-if="pages.answer > 1" class="pagination">
                            <n-pagination v-model:page="currentPage.answer" :page-count="pages.answer"
                                          @update:page="handleCurrentPageChangeOfAnswer"/>
                        </div>
                    </n-tab-pane>
                    <n-tab-pane name="collections" style="min-height: 50vh" tab="我的收藏">
                        <div class="content">
                            <question-answer v-for="collection in collections" :key="collection.id" :answer="collection"
                                             :is-collection="true" :user-state="userState"/>
                            <n-empty v-if="!collections.length" description="你还没有收藏过回答" size="large">
                                <template #extra>
                                    <n-button>
                                        看看别的
                                    </n-button>
                                </template>
                            </n-empty>
                        </div>
                        <div v-if="pages.collection > 1" class="pagination">
                            <n-pagination v-model:page="currentPage.collection" :page-count="pages.collection"
                                          @update:page="handleCurrentPageChangeOfCollection"/>
                        </div>
                    </n-tab-pane>
                </n-tabs>
            </n-card>
        </n-spin>
    </div>
</template>

<style scoped>
.flex-container {
    display: flex;
    gap: 1vw;
}

.left {
    width: 30%;
    height: 100%;
}

.avatar-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 4vh;
}

.avatar-name .username {
    margin-top: 1vh;
    font-size: 16px;
}

.right {
    flex: 1;
}

.right:deep(.n-empty) {
    transform: translateY(50%);
}

.content {
    min-height: 45vh;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2vh;
}
</style>

<script setup>
import { onMounted, ref } from 'vue'
import { getUser } from '../api/user'
import Question from '../components/Question.vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../store/user'
import QuestionAnswer from '../components/QuestionAnswer.vue'
import { listCollections } from '../api/collections'
import { listQuestionsByUserId } from '../api/question'
import { listAnswersByUserId } from '../api/answer'
import { useQuestionStore } from '../store/question'
import { useLoadingBar } from 'naive-ui'

const route = useRoute()
const userStore = useUserStore()
const userInfo = ref({
    id: '',
    username: '',
    createTime: '',
    lastLogin: '',
    token: '',
})
const answers = ref([])
const questions = ref([])
const userState = ref(false)

const checkUserState = () => {
    userState.value = userStore.account === userInfo.value.account
}

const collections = ref(null)
const currentPage = ref({
    question: 1,
    answer: 1,
    collection: 1,
})
const pages = ref({
    question: 1,
    answer: 1,
    collection: 1,
})
const pageSize = ref({
    question: 10,
    answer: 5,
    collection: 5,
})
const total = ref({
    question: 0,
    answer: 0,
    collection: 0,
})
const questionStore = useQuestionStore()
const loadingBar = useLoadingBar()
const handleCurrentPageChangeOfQuestion = (current) => {
    loadingBar.start()
    questionStore.loading = true
    currentPage.value.question = current
    listQuestionsByUserId(currentPage.value.question, pageSize.value.question, route.params.id).then(res => {
        if (res.code === '200') {
            questions.value = res.data.records
            currentPage.value.question = res.data.current
            pages.value.question = res.data.pages
            total.value.question = res.data.total
            questionStore.loading = false
            loadingBar.finish()
        }
    })
}
const handleCurrentPageChangeOfAnswer = (current) => {
    questionStore.loading = true
    currentPage.value.answer = current
    listAnswersByUserId(currentPage.value.answer, pageSize.value.answer, route.params.id).then(res => {
        if (res.code === '200') {
            answers.value = res.data.records
            currentPage.value.answer = res.data.current
            pages.value.answer = res.data.pages
            total.value.answer = res.data.total
            questionStore.loading = false
        }
    })
}
const handleCurrentPageChangeOfCollection = (current) => {
    questionStore.loading = true
    currentPage.value.collection = current
    listCollections(route.params.id, currentPage.value.collection, pageSize.value.collection).then(res => {
        collections.value = res.data.records
        total.value.collection = res.data.total
        currentPage.value.collection = res.data.current
        pages.value.collection = res.data.pages
        questionStore.loading = false
    })
}

const router = useRouter()
onMounted(() => {
    getUser(route.params.id).then(res => {
        if (res.code === '200') {
            userInfo.value = res.data
            document.title = res.data.username + ' - 爱编程'
            checkUserState()
        }
    })
    handleCurrentPageChangeOfQuestion(currentPage.value.question)
    handleCurrentPageChangeOfAnswer(currentPage.value.answer)
        handleCurrentPageChangeOfCollection(currentPage.value.collection)
    },
)
</script>
